<template>
    <div class="evaluation" v-if="pageData">
        <div class="ball-repair"><div class="infinite-repair"></div></div>
        <div class="ball-evaluation"><div class="infinite-evaluation"></div></div>
        <div class="ball-check"><div class="infinite-check"></div></div>
        <div class="light-dotted-top"></div>
        <div class="light-dotted-bottom"></div>
        <div class="rooms room-repair">
            <h4>设备关注度TOP1</h4>
            <p>{{pageData.repair1}}</p>
        </div>
        <div class="rooms room-evaluation">
            <h4>设备关注度TOP2</h4>
            <p>{{pageData.repair2}}</p>
        </div>
        <div class="rooms room-daily">
            <h4>设备关注度TOP3</h4>
            <p>{{pageData.repair3}}</p>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {}
        },
        mounted () {
        },
        components: {},
        watch: {
            pageData: function (n, o) {
            }
        }
    }
</script>
<style lang='scss' rel="stylesheet/scss">

    .ballBg{
        background-repeat: no-repeat;
        background-position: center top;
        position: absolute;
    }
    .lightDottedBg{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .evaluation{
        background-image: url("../../assets/images/monitor-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        .ball-repair{
            width: 17rem;
            height: 17rem;
            position: absolute;
            top: 6%;
            left: 11%;
            opacity: 0;
            .infinite-repair{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/ball-repair.png");
                @extend .ballBg;
                top:0;
                animation: infiniteFloatRepair 03s linear infinite;
            }
        }
        .ball-evaluation{
            width: 18rem;
            height: 22rem;
            position: absolute;
            top: 36%;
            right: 11%;
            opacity: 0;
            .infinite-evaluation{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/ball-evaluate.png");
                @extend .ballBg;
                left:0;
                animation: infiniteFloatEvaluate 03s linear infinite;
            }
        }
        .ball-check{
            width: 18rem;
            height: 19rem;
            position: absolute;
            bottom: 6%;
            left: 11%;
            opacity: 0;
            .infinite-check{
                width: 100%;
                height: 100%;
                background-image: url("../../assets/images/ball-check.png");
                @extend .ballBg;
                top:0;
                animation: infiniteFloatChect 03s linear infinite;
            }
        }
        .light-dotted-top{
            width: 40%;
            height: 20%;
            background-image: url("../../assets/images/light-dotted-top.png");
            top: 21%;
            left: 20%;
            @extend .lightDottedBg;
            opacity: 0;
        }
        .light-dotted-bottom{
            width: 40%;
            height: 20%;
            background-image: url("../../assets/images/light-dotted-bottom.png");
            bottom: 24%;
            right: 23%;
            @extend .lightDottedBg;
            opacity: 0;
        }
        .rooms{
            @extend .ballBg;
            font-size: 1.6rem;
            text-align: center;
            height: 14.8%;
            width: 51%;
            background-size: 100% 100%;
            >h4{
                font-weight: normal;
                margin-top: 9%;
            }
            >p{
                font-weight: bold;
                font-size: 2.7rem;
                width: 90%;
                height: 32%;
                padding-top: 4%;
                margin: 5% auto 0 auto;
                background: #12499c;
                letter-spacing: 2px;
            }
            &.room-repair{
                background-image: url("../../assets/images/rooms-bg.png");
                left: 44%;
                top: 12%;
                opacity: 0;
            }
            &.room-evaluation{
                background-image: url("../../assets/images/rooms-bg.png");
                left: 5%;
                top: 42%;
                opacity: 0;

            }
            &.room-daily{
                background-image: url("../../assets/images/rooms-bg.png");
                right: 5%;
                bottom: 9%;
                opacity: 0;
            }
        }
    }
    .showCurrentPageModule{
        .ball-repair{
            animation: defaultOpacityAni 0.2s linear;
            animation-fill-mode: forwards;
        }
        .ball-evaluation{
            animation: defaultOpacityAni 0.2s linear .4s;
            animation-fill-mode: forwards;
        }
        .ball-check{
            animation: defaultOpacityAni 0.2s linear .8s;
            animation-fill-mode: forwards;
        }
        .light-dotted-top{
            animation: defaultOpacityAni 0.2s linear .2s;
            animation-fill-mode: forwards;
        }
        .light-dotted-bottom{
            animation: defaultOpacityAni 0.2s linear .6s;
            animation-fill-mode: forwards;
        }
        .rooms{
            &.room-repair{
                animation: defaultOpacityAni 0.2s linear .2s;
                animation-fill-mode: forwards;
            }
            &.room-evaluation{
                animation: defaultOpacityAni 0.2s linear .4s;
                animation-fill-mode: forwards;
            }
            &.room-daily{
                animation: defaultOpacityAni 0.2s linear 0.8s;
                animation-fill-mode: forwards;
            }
        }
    }
    @keyframes infiniteFloatRepair{
        50% {top: -2%}
        100%{top: 0}
    }
    @keyframes infiniteFloatEvaluate{
        50% {left: 3%}
        100%{left: 0}
    }
    @keyframes infiniteFloatChect{
        50% {top: 2%}
        100%{left: 0}
    }

</style>